<template>
  <div class="item" @click="goMerchantList(icons.name)">
    <i
      :class="`icon ${icons.icon}`"
      :style="`background-color:${icons.color} `"
    ></i>
    <span class="title">{{ icons.name }}</span>
    <span class="info">{{ item.count }}+店铺</span>
  </div>
</template>

<script>
import { getIcon } from "@/utils/tools";
export default {
  props: ["item"],
  computed: {
    icons() {
      return this.getIcon(this.item.merchantCategory);
    },
  },
  methods: {
    getIcon,
    goMerchantList() {
      console.log("点击类别---typeItem");
    },
  },
};
</script>

<style lang="less" scoped>
@icon-height: 3rem;
@item-hight: 8.38rem;
@num-10: 0.6rem;

.item {
  width: @item-hight;
  height: @item-hight;
  display: flex;
  border-radius: @num-10;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  background: #f5f2f2;

  .info {
    display: block;
    width: 80%;
    margin-top: 0.2rem;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
  }

  .title {
    font-size: 1rem;
    letter-spacing: 0.1rem;
    font-weight: 700;
  }

  i {
    border-radius: @num-10;
    color: white;
    text-align: center;
    line-height: @icon-height;
    width: @icon-height;
    height: @icon-height;
    font-size: 2rem;
    margin-bottom: @num-10;
    margin-top: @num-10;
    /* 图标颜色 */
  }

  &:hover {
    box-shadow: 0.3rem 0.3rem 1rem #bebebe, -@num-10 -@num-10 @num-10 #ffffff;
    /* 悬停效果，内阴影 */
  }
}

.purple-icon {
  background-color: purple;
}

.red-icon {
  background-color: red;
}

.green-icon {
  background-color: green;
}

.blue-icon {
  background-color: skyblue;
}

.yellow-icon {
  background-color: rgb(161, 161, 44);
}
</style>